
// 获取页面中元素
let list = document.querySelector('.list');
let typeList = document.querySelector('.typeList');
let nav  = document.querySelector('nav');

// 渲染数据 -> 数据从哪里来 -> 数据从服务器获取 -> 请求服务器 -> axios
axios.get('/allHero').then( result => {
    // result 服务器返回的数据
    render(result.data);
});

// 让页面滚动
let bs = new BScroll('main');

// typeList 是下拉列表, 点击事件效果不好, 使用change事件
// 点击事件, 点击时触发, change事件, 在值发生改变的时候触发.
typeList.onchange = function(){
    // this.selectedIndex 下拉列表选择option的下标,
    // 通过这个下标,就可以找到对应的option,可以获取对应的名字
    let value = typeList.children[this.selectedIndex].innerHTML

    // ajax请求, 把选择类型, 提交给服务器
    axios.get(`/heroType/type/${value}`).then(result => {
        // 渲染数据
        render(result.data);
    });
}
let flag;
// 给导航添加点击事件 , 对数据进行排序
nav.onclick = function(e){
    let tar = e.target;
    // 判断点击的是不是span, 因为  价格,攻击力, 法术强度都是span
    if(tar.tagName === 'SPAN'){
        // '价格'   -> 根据空格切割' ' -> [价格]
        // '价格 ↑' -> 根据空格切割' ' -> [价格, ↑]
        // '价格 ↓' -> 根据空格切割' ' -> [价格, ↓]
        let arr = tar.innerHTML.split(' ');
        // arr[1] === undefiend
        if(arr[1] === '↑'){
            // '价格 ↓'
            tar.innerHTML = arr[0] + ' ↓'
            // 降序
            flag = 1;
        }else{
            tar.innerHTML = arr[0] + ' ↑'
            // '价格 ↑'
            // 升序
            flag = 2;
        }
        // 去掉其他span的箭头, 遍历所有的span
        let allSpan =  [...nav.querySelectorAll('span')];
        // 遍历
        allSpan.forEach(span => {
            if(span !== tar){
                span.innerHTML = span.innerHTML.split(' ')[0];
            }
        });

        // 获取点击元素的自定义属性
        let type = tar.getAttribute('data-type');
        // 把这个属性,上传到服务器, 告诉服务器,根据这个属性,进行排序
        axios.get(`/heroSort/type/${type}/flag/${flag}/`).then(result => {
            console.log(result.data);
            render(result.data);
        });
    }
}


//渲染
function render(arr){
    list.innerHTML = arr.map(item => {
        return `<div class="item">
                    <img src="${item.img}" alt="">
                    <div class="msg">
                        <p>名字 : ${item.name}  价格: ${item.price} </p> 
                        <p>类型 : ${item.type}  攻击: ${item.attack} 法术: ${item.magic}</p> 
                        <p>简介 : ${item.detail}</p>
                    </div>
                    <div class="right">
                        <p>收藏</p>
                        <p>购买</p>
                        <p>详情</p>
                    </div>
                </div>`
    }).join('');

    // 刷新页面
    bs.refresh();
}